<template >
<full-screen-progress v-if ='showBac'/>
  <!-- 日志弹窗 -->
  <div class="dialog-wrapper">
    <el-dialog :title="Logs" v-model="dialogTableVisible" center>
      <div>
        <div class="chosedata">
          <strong>{{ ReviewLogs }}:</strong>
          <el-checkbox-group
            v-model="checkeddate"
            :min="1"
            @change="bindCheckBox"
            style="display: inline"
          >
            <el-checkbox
              @click="querydialog(1)"
              :label="1"
              checked="true"
              name="button"
              style="margin-left: 3%; color: #7b90b8"
              >{{ oneDay }}</el-checkbox
            >
            <el-checkbox
              :label="3"
              @click="querydialog(3)"
              name="button"
              style="margin-left: 3%; color: #7b90b8"
              >{{ threeDay }}</el-checkbox
            >
            <el-checkbox
              :label="7"
              @click="querydialog(7)"
              name="button"
              style="margin-left: 3%; color: #7b90b8"
              >{{ sevenDay }}</el-checkbox
            >
            <el-checkbox
              :label="30"
              @click="querydialog(30)"
              name="button"
              style="margin-left: 3%; color: #7b90b8"
              >{{ thirtyDay }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <el-scrollbar class="dialog_content" height="450px">
          <div v-for="(content, index) in dialogdata" :key="index">
            <span>{{ content.time }}</span
            >&nbsp;&nbsp; <span>{{ content.action }}</span> &nbsp;
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
  <!-- 日志弹窗 end -->
  <!-- 设计电脑信息弹窗 start -->
  <div class="dialog-wrapper">
    <el-dialog :title="Nesting" v-model="ShowDesignMedchineInfo" center>
      <el-table
        :data="alldesign"
        height="80%"
        :header-cell-style="titlestyle2"
        style="border-radius: 2%"
        :row-style="rowstyles2"
        border
        :cell-style="setCellColor2"
      >
        <el-table-column prop="designName" :label="Nesting" align="center" />
        <el-table-column prop="designIp" :label="SpecifyIp" align="center" />
      </el-table>
    </el-dialog>
  </div>
  <!-- 设计电脑信息弹窗end -->
  <!-- <img @click="Todiv1" src="../../img/left.png" class="leftbtn" />
  <img @click="Todiv2" src="../../img/right.png" class="rightbtn" /> -->

  <div class="div-fatcher" v-if='!showBac'>
    <!-- <transition name="div1"> -->
    <div
      class="div1"
      style="height: 90%"
      v-show="NowDislay === 'div1'"
      ref="div1"
    >
      <div class="title">
        <div style="display: inline">
          <h1
            class="title-h3"
            :style="{ marginLeft: languageSetting == 'china' ? '40%' : '34%' }"
          >
            {{ titleHsName }}
          </h1>
        </div>
        <div class="title-right">
          <el-icon
            size="30px"
            color="#6F83AA"
            @click="dialogTableVisible = true"
          >
            <Tickets />
          </el-icon>
          <el-icon
            size="30px"
            color="#6F83AA"
            style="margin-left: 10%"
            @click="DesignMedchineInfoMethod"
          >
            <Setting />
          </el-icon>
          <el-image
            @click="laguageSwitch"
            :src="laguageSwitchUrl"
            style="width: 30px; height: 30px; margin-left: 10%"
          />
        </div>
      </div>

      <div class="content">
        <div class="table1 lefttable" style="margin-left: 0%">
          <!-- <div  style="background: rgb(46, 54, 72); text-align: center;height:9%;
            color: rgb(36, 174, 187); border: 1px solid rgb(72, 79, 98);font-weight: bold;">
                <div style="margin-top: 2%;">已提取</div>
              </div> -->

          <el-table
            :data="uploadfile"
            :span-method="arraySpanMethod"
            height="100%"
            :header-cell-style="titlestyle"
            style="background-color: rgb(30, 40, 59); font-size: 10px"
            :row-style="rowstyles"
            :cell-style="{ borderColor: '#484f62' }"
          >
            <el-table-column :label="Extracted" style="font-size: 10px">
              <el-table-column :label="NumberMsg" width="60%" align="center">
                <template #default="scope">
                  <span style="font-size: 10px">{{ scope.row.fileId }}</span>
                </template>
              </el-table-column>

              <!-- <el-table-column prop="file_id" label="" align="center" width="40%">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.ischecked" />
                  </template>
                </el-table-column> -->
              <el-table-column prop="fileName" label="NC" align="left">
                <template #default="scope">
                  <el-checkbox
                    style=""
                    :label="scope.row.fileName"
                    v-model="scope.row.ischecked"
                    @click="
                      clickOneUploadFile(scope.row.ischecked, scope.row.fileId)
                    "
                  />
                </template>
              </el-table-column>

              <el-table-column :label="Image" width="65px">
                <template #default="scope">
                  <el-image
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      display: block;
                      margin: 0 5px;
                    "
                    :src="scope.row.srcList"
                    :preview-src-list="[scope.row.srcList]"
                    preview-teleported
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column :label="Server" width="85%" align="center">
                <template #default="scope">
                  <span style="font-size: 10px">{{
                    scope.row.desiginName
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="table-count">
            <div
              class="table-count-leftone"
              :style="{ color: upload_all_check ? '#24aebb' : '' }"
            >
              <el-checkbox
                @change="checkallupload"
                v-model="upload_all_check"
              />
              {{ SelectAll }}
            </div>
            <div class="table-count-right">
              {{ Total }}
              <text class="table-count-num">{{ uploadfile_count }}</text>
              {{ Items }}
            </div>
          </div>
        </div>

        <div class="table1" style="width: 40%">
          <el-table
            :data="workingfile"
            style="background-color: rgb(30, 40, 59); font-size: 10px"
            borderv
            height="100%"
            :header-cell-style="titlestyle"
            :row-style="rowstyles"
            :cell-style="{ borderColor: '#484f62' }"
          >
            <el-table-column :label="InProcessing">
              <!-- <el-table-column prop="file_id" align="center" width="40%">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.ischecked" />
                  </template>
                </el-table-column> -->
              <el-table-column prop="file_name" label="NC" align="left">
                <template #default="scope">
                  <!-- <el-checkbox v-model="scope.row.ischecked" />
                    <span style="margin-left: 10px;font-size: 10px;">{{ scope.row.file_name }}</span> -->
                  <!-- <div style="position: absolute;width:30%;"><el-checkbox v-model="scope.row.ischecked" /></div>
                    <div style="margin-left:23px;font-size: 10px;">{{ scope.row.file_name }}</div> -->

                  <el-checkbox
                    :label="scope.row.fileName"
                    v-model="scope.row.ischecked"
                    @click="
                      clickOneWorkingFile(scope.row.ischecked, scope.row.fileId)
                    "
                  />
                </template>
              </el-table-column>

              <el-table-column :label="Image" width="65px">
                <template #default="scope">
                  <el-image
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      display: block;
                      margin: 0 5px;
                    "
                    :src="scope.row.srcList"
                    :preview-src-list="[scope.row.srcList]"
                    preview-teleported
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column :label="Machine" align="center" width="80%">
                <template #default="scope">
                  <span style="font-size: 10px">{{
                    scope.row.a53GroupName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="Device" align="center" width="80%">
                <template #default="scope">
                  <span style="font-size: 10px">{{ scope.row.fileA53 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="ProgressRate"
                style="font-size: 50px"
                width="132px"
                align="center"
              >
                <template #default="scope">
                  <!-- 加工中进度，数字 -->
                  <!-- <span style="font-size: 30px">
                    {{ scope.row.fileWorkingPer }}
                  </span> -->
                  <!-- 加工中进度条 -->
                  <el-progress
                    :percentage="scope.row.fileWorkingPer"
                    :stroke-width="6"
                    :color="customColors"
                  ></el-progress>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="table-count">
            <div
              class="table-count-left-twoandthree"
              :style="{ color: working_all_check ? '#24aebb' : '' }"
            >
              <el-checkbox
                @change="checkallworking"
                v-model="working_all_check"
              />
              {{ SelectAll }}
            </div>
            <div class="table-count-right">
              {{ Total }}
              <text class="table-count-num">{{ workingfile_count }}</text>
              {{ Items }}
            </div>
          </div>
          <br />
        </div>
        <div class="table1 righttable">
          <el-table
            :data="finishfile"
            style="background-color: rgb(30, 40, 59); font-size: 10px"
            borderv
            height="100%"
            :header-cell-style="titlestyle"
            :row-style="rowstyles"
            :cell-style="{ borderColor: '#484f62' }"
          >
            <el-table-column :label="Completed">
              <!-- <el-table-column prop="file_id" align="center" width="40%">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.ischecked" />
                  </template>
                </el-table-column> -->

              <el-table-column prop="fileName" label="NC" align="left">
                <template #default="scope">
                  <el-checkbox
                    :label="scope.row.fileName"
                    v-model="scope.row.ischecked"
                     @click="clickOneFinishFile(scope.row.ischecked, scope.row.fileId)"
                  />
                </template>
              </el-table-column>
              <el-table-column :label="Image" width="65px">
                <template #default="scope">
                  <el-image
                    style="
                      width: 30px;
                      height: 30px;
                      border-radius: 50%;
                      display: block;
                      margin: 0 5px;
                    "
                    :src="scope.row.srcList"
                    :preview-src-list="[scope.row.srcList]"
                    preview-teleported
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column :label="Machine" align="center" width="80%">
                <template #default="scope">
                  <span style="font-size: 10px">{{
                    scope.row.a53GroupName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="Device" align="center" width="80%">
                <template #default="scope">
                  <span style="font-size: 10px">{{ scope.row.fileA53 }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="table-count">
            <div
              class="table-count-left-twoandthree"
              :style="{ color: finish_all_check ? '#24aebb' : '' }"
            >
              <el-checkbox
                @change="checkallfinish"
                v-model="finish_all_check"
              />
              {{ SelectAll }}
            </div>
            <div class="table-count-right">
              {{ Total }}
              <text class="table-count-num">{{ finishfile_count }}</text>
              {{ Items }}
            </div>
          </div>
        </div>
      </div>
      <div
        style="
          color: #7b90b8;
          display: flex;
          align-items: center;
          margin-top: 2%;
        "
      >
        <div style="width: 85px">{{ DisplayList }}:</div>

        <el-checkbox-group
          v-model="checkeddate2"
          :min="1"
          @change="bindCheckBox2"
        >
          <el-checkbox
            @click="querybyfiledate(1)"
            checked="true"
            :label="1"
            size="large"
            style="color: #7b90b8; margin-left: 2%"
            >{{ oneDay }}</el-checkbox
          >
          <el-checkbox
            @click="querybyfiledate(3)"
            :label="3"
            size="large"
            style="color: #7b90b8; margin-left: 2%"
            >{{ threeDay }}</el-checkbox
          >
          <el-checkbox
            @click="querybyfiledate(7)"
            :label="7"
            size="large"
            style="color: #7b90b8; margin-left: 2%"
            >{{ sevenDay }}</el-checkbox
          >
          <el-checkbox
            @click="querybyfiledate(30)"
            :label="30"
            size="large"
            style="color: #7b90b8; margin-left: 2%"
            >{{ thirtyDay }}</el-checkbox
          >
           <el-checkbox
            @click="querybyfiledate(0)"
            :label="0"
            size="large"
            style="color: #7b90b8; margin-left: 2%"
            >{{ allFileDay }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div class="button">
        <button
          style="
            color: #7b90b8;
            border: 1px solid #484f62;
            width: 11%;
            margin-left: 38.5%;
            height: 38px;
            background-color: rgba(0, 0, 0, 0);
          "
          @click="exportexcel"
        >
          {{ Export }}
        </button>
        <button
          @click="noseefile"
          style="
            color: #7b90b8;
            border: 1px solid #484f62;
            width: 11%;
            height: 38px;
            background-color: rgba(0, 0, 0, 0);
            margin-left: 1%;
          "
        >
          {{ Delete }}
        </button>

        <button
          @click="ReworkMethod"
          style="
            color: #7b90b8;
            border: 1px solid #484f62;
            width: 11%;
            height: 38px;
            background-color: rgba(0, 0, 0, 0);
            margin-left: 1%;
          "
        >
          {{ Rework }}
        </button>
      </div>
      <!-- -------------- -->
      <div
        style="
          width: 100%;
          margin-bottom: 2%;
          height: 1px;
          border-top: 1px solid rgb(72, 79, 98);
        "
      ></div>
      <div>
        <div class="shebeilist">
          <h1>{{ deviceList }}</h1>
        </div>
        <div class="content">
          <div class="table2" style="margin-left: 0%">
            <h4 class="table2-title">A5</h4>
            <table style="color: #7b90b8; width: 100%">
              <tr
                v-for="(content, index) in alla53"
                style="
                  width: 100%;
                  line-height: 200%;
                  font-size: 10px;
                  border: 1px solid #484f62;
                "
                :key="index"
              >
                <td
                  style="
                    text-align: center;
                    border-bottom: 1px solid #484f62;
                    border-right: 1px solid #484f62;
                  "
                  :style="{
                    color: content.a53Status == '1' ? '#24aebb' : (content.a53Status == '2' ? '#FF0000' : '#7B90B8')
                  }"
                >
                <!-- todo这里太麻烦了，应该写个函数 -->
                  {{
                    switchA53Status(content.a53Status)
                  }}
                </td>
                <td
                  style="
                    text-align: center;
                    border-bottom: 1px solid #484f62;
                    border-right: 1px solid #484f62;
                  "
                >
                  {{ content.a53Ip }}
                </td>
                <td
                  style="
                    text-align: center;
                    border-bottom: 1px solid #484f62;
                    border-right: 1px solid #484f62;
                  "
                >
                  {{ content.a53GroupName }}
                </td>
                <td style="border-bottom: 1px solid #484f62">
                  <span
                    style="
                      width: 88%;
                      display: inline-block;
                      text-align: center;
                    "
                    >{{ content.a53Name }}
                  </span>
                  <span style="text-align: right">
                    <el-icon
                      style="text-align: right"
                      size="20px"
                      color="rgb(62, 72, 99)"
                      @click="noseea53(content.id)"
                    >
                      <Close />
                    </el-icon>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <div class="table2">
            <h4 class="table2-title">{{ Nesting }}</h4>
            <table style="color: #7b90b8; width: 100%">
              <tr
                v-for="(content, index) in alldesign"
                style="
                  width: 100%;
                  line-height: 200%;
                  font-size: 10px;
                  border: 1px solid #484f62;
                "
                :key="index"
              >
                <td
                  style="
                    text-align: center;
                    border-bottom: 1px solid #484f62;
                    border-right: 1px solid #484f62;
                  "
                  :style="{
                    color: content.designStatus == '1' ? '#24aebb' : '#7B90B8',
                  }"
                >
                  {{
                    content.designStatus == "1"
                      ? online
                      : content.designStatus
                      ? offline
                      : ""
                  }}
                </td>
                <td
                  style="
                    text-align: center;
                    border-bottom: 1px solid #484f62;
                    border-right: 1px solid #484f62;
                  "
                >
                  {{ content.designIp }}
                </td>
                <td style="border-bottom: 1px solid #484f62">
                  <span
                    style="
                      width: 88%;
                      display: inline-block;
                      text-align: center;
                    "
                    >{{ content.designName }}
                  </span>
                  <span style="text-align: right">
                    <el-icon
                      size="20px"
                      color="rgb(62, 72, 99)"
                      @click="noseedesign(content.id)"
                    >
                      <Close />
                    </el-icon>
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div>&nbsp;&nbsp;&nbsp;&nbsp;</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Setting,
  Tickets,
  Close,
  ArrowRight,
  ArrowLeft,
  SoldOut,
} from "@element-plus/icons-vue";
import IndexInterface from "../utils/API/Index";
import { ElMessage, ElMessageBox } from "element-plus";
import FullScreenProgress from '@/components/FullScreenProgress.vue';

export default {
  name: "index",
  components: {
    Setting: Setting,
    Tickets: Tickets,
    Close,
    ArrowRight,
    ArrowLeft,
    FullScreenProgress,
  },

  data() {
    return {
      showBac:true,
      heartTimer: "",
      socket: "",
      querybyfiledateDay: 1,
      querydialogDay: 1,
      customColors: "rgb(33,175,187)",
      uploadfile: [],
      titleHsNameMarginLeft: "40%",
      uploadfile_count: "",
      workingfile_count: "",
      workingfile: [],
      finishfile: [],
      finishfile_count: "",
      alla53: [],
      alldesign: [],
      dialogTableVisible: false,
      ShowDesignMedchineInfo: false,
      center: "center",
      radio: "1",
      checkeddate: [],
      checkeddate2: [],
      dialogdata: "",
      alldesign: "",
      NowDislay: "div1",
      filesIdList: [],
      finish_all_check: false,
      working_all_check: false,
      upload_all_check: false,
      languageSetting: "china",
      laguageSwitchUrl: require("../../img/china.png"),
      titleHsName: "A5 物联网管理系统",
      Extracted: "已提取",
      InProcessing: "加工中",
      Completed: "已完成",
      NumberMsg: "编号",
      Server: "服务器",
      ProgressRate: "进度",
      Image: "图片",
      Machine: "设备组",
      Device: "设备",
      SpecifyIp: "指定IP",
      SelectAll: "全选",
      Total: "共",
      Items: "项",
      DisplayList: "显示列表",
      oneDay: "1天",
      threeDay: "3天",
      sevenDay: "7天",
      thirtyDay: "30天",
      allFileDay:"所有文件",
      Export: "导出",
      Delete: "删除",
      IsDeleteTipMsg: "是否删除该信息?",
      deviceList: "设备列表",
      Logs: "日   志",
      Nesting: "排版电脑",
      Yes: "是",
      No: "否",
      SuccessfullyDeleted: "删除成功",
      Undelete: "取消删除",
      offline: "离线",
      working:"加工中",
      online: "在线",
      WhetherToDeleteTheSelectedFile: "是否删除选中文件？",
      WhetherToReworkTheSelectedFile: "是否确定重新加工选中文件？",
      onlineColor: "#24aebb",
      ReviewLogs: "查找日志",
      Rework: "重新加工",
      UnreworkText: "取消重新加工",
      language: 'china'
    };
  },

  //代表当前vue创建的时候，会自动执行的代码
  created() {
    // todo 获取当前ip
    this.querydialog(1);

    this.socket = new WebSocket("ws://" + location.host + "/socket");
    // 获取localstorge保存的语言,如果是英文，就切换语言
    this.language = localStorage.getItem('language')
    if(this.language ==='en'){
        this.laguageSwitch()
    }else{
      // 不是英语，那就是中文
      localStorage.setItem('language', 'china');
    }
    this.socket.onopen = () => {
      console.log("【WebSocket消息】成功链接");
      this.socket.send(1);
      this.heartTimer = setInterval(() => {
        // 发送心跳消息
        this.socket.send(-99);
      }, 30000);
    };

    this.socket.onmessage = (event) => {
      if (event.data === "-99") {
        console.log(new Date() + "收到后端心跳包");
        return;
      }
      var temp = JSON.parse(event.data);
      if (temp.type === "1") {
        this.alla53 = temp.data;
        this.fillA53();
      } else if (temp.type === "2") {
        this.alldesign = temp.data;
        this.fillDesign();
      } else if (temp.type === "3") {
        this.uploadfile = temp.data;
      } else if (temp.type === "4") {
        this.workingfile = temp.data;
      } else if (temp.type === "5") {
        this.finishfile = temp.data;
      }
    };
    this.socket.onclose = (event) => {
      alert("链接断开，请刷新界面");
      clearInterval(this.heartTimer);
      this.heartTimer = null;
    };
  },
  mounted() {
    // 设置一个定时器，3秒后隐藏进度条
    setTimeout(() => {
      this.showBac = false;
    }, 3000);
  },
  methods: {

    switchA53Status(status) {

    if (status === "1") {
        return this.online;
    } else if (status === "2") {
        return this.working;
    } else if (status=="-1"){
        return this.offline;
    }
    else{
      return "";
    }
},

    // 点击上传文件多选按钮的一个按钮时，判断当前点击按钮的选中状态 和 列表中所有文件状态是否一致，
    // 不一致则全选按钮未被选中，一致且不是全未选的情况下，全选按钮被选中

    // 因为是绑定click事件，所以ischecked字段是反的，要取反后
    // 才能false表示未被选中，true表示被选中
    clickOneUploadFile(ischecked, fileId) {
      ischecked = !ischecked;
      var uploadfile = JSON.parse(JSON.stringify(this.uploadfile));
      for (var item in uploadfile) {
        if (
          uploadfile[item].ischecked !== ischecked &&
          uploadfile[item].fileId !== fileId
        ) {
          this.upload_all_check = false;
          return;
        }
      }
      // 这时当前点击按钮选中状态和列表里的全部文件选中状态已经一致，避免出现挨个取消选中，全选还被选中的情况。
      if (ischecked === false) {
        this.upload_all_check = false;
      } else {
        this.upload_all_check = true;
      }
    },

      clickOneWorkingFile(ischecked, fileId) {
      ischecked = !ischecked;
      var workingfile = JSON.parse(JSON.stringify(this.workingfile));
      for (var item in workingfile) {
        if (
          workingfile[item].ischecked !== ischecked &&
          workingfile[item].fileId !== fileId
        ) {
          this.working_all_check = false;
          return;
        }
      }
      // 这时当前点击按钮选中状态和列表里的全部文件选中状态已经一致，避免出现挨个取消选中，全选还被选中的情况。
      if (ischecked === false) {
        this.working_all_check = false;
      } else {
        this.working_all_check = true;
      }
    },
    //  点击加工完成文件名触发
    clickOneFinishFile(ischecked, fileId) {
      ischecked = !ischecked;
      var finishfile = JSON.parse(JSON.stringify(this.finishfile));
      for (var item in finishfile) {
        if (
          finishfile[item].ischecked !== ischecked &&
          finishfile[item].fileId !== fileId
        ) {
          this.finish_all_check = false;
          return;
        }
      }
      // 这时当前点击按钮选中状态和列表里的全部文件选中状态已经一致，避免出现挨个取消选中，全选还被选中的情况。
      if (ischecked === false) {
        this.finish_all_check = false;
      } else {
        this.finish_all_check = true;
      }
    },
    
    // 按下完成文件的全选
    checkallfinish() {
      var finishfile = JSON.parse(JSON.stringify(this.finishfile));
      for (var item in finishfile) {
        finishfile[item].ischecked = this.finish_all_check;
      }
      this.finishfile = finishfile;
    },
    // 按下已提取文件的全选
    checkallupload() {
      var uploadfile = JSON.parse(JSON.stringify(this.uploadfile));
      for (var item in uploadfile) {
        uploadfile[item].ischecked = this.upload_all_check;
      }
      this.uploadfile = uploadfile;
    },
    // 按下正在加工文件的多选
    checkallworking() {
      var workingfile = JSON.parse(JSON.stringify(this.workingfile));
      for (var item in workingfile) {
        workingfile[item].ischecked = this.working_all_check;
      }
      this.workingfile = workingfile;
    },

    //切换语言
    laguageSwitch() {
      if (this.laguageSwitchUrl.indexOf("img/en") == -1) {
        localStorage.setItem('language', 'en');
        //此时是中文
        this.laguageSwitchUrl = require("../../img/en.png");
        this.titleHsName = "A5 IOT Management System";
        this.Extracted = "Extracted";
        this.InProcessing = "In processing";
        this.Completed = "Completed";
        this.NumberMsg = "No.";
        this.Server = "Server";
        this.ProgressRate = "Progress rate";
        this.Image = "Image";
        this.Machine = "Machine";
        this.Device = "Device";
        this.SelectAll = "Select all";
        this.Total = "Total";
        this.Items = "items";
        this.DisplayList = "Disply list";
        this.oneDay = "1 Day";
        this.threeDay = "3 Day";
        this.sevenDay = "7 Day";
        this.thirtyDay = "30 Day";
        this.allFileDay="all Files",
        this.Export = "Export";
        this.Delete = "Delete";
        this.deviceList = "Device List";
        this.Nesting = "Nesting";
        this.Logs = "Logs";
        this.IsDeleteTipMsg = "Whether to delete the  information?";
        this.ReviewLogs = "Review logs";
        this.SpecifyIp = "Specify IP";
        this.Yes = "Yes";
        this.No = "No";
        this.SuccessfullyDeleted = "successfully deleted";
        this.Undelete = "Undelete";
        this.UnreworkText = "Unrework";
        this.Rework = "Rework";
        this.WhetherToReworkTheSelectedFile =
          "Whether to rework the selected file?";
        (this.offline = "Offline"),
        this.working="working",
          (this.online = "Online"),
          (this.WhetherToDeleteTheSelectedFile =
            "Whether to delete the selected file?"),
          (this.languageSetting = "en");
      } else {
        localStorage.setItem('language', 'china');
        // 此时中文
        this.languageSetting = "china";
        this.laguageSwitchUrl = require("../../img/china.png");
        this.titleHsName = "A5 物联网管理系统";
        this.Extracted = "已提取";
        (this.WhetherToDeleteTheSelectedFile = "是否删除选中文件？"),
          (this.InProcessing = "加工中");
        this.WhetherToReTheSelectedFile = "是否重新加工选中文件？";
        this.Completed = "已完成";
        this.NumberMsg = "编号";
        this.Server = "服务器";
        this.ProgressRate = "进度";
        this.Image = "图片";
        this.Machine = "设备组";
        this.Device = "设备";
        this.SelectAll = "全选";
        this.Total = "共";
        this.Items = "项";
        this.DisplayList = "显示列表";
        this.oneDay = "1天";
        this.threeDay = "3天";
        this.sevenDay = "7天";
        this.thirtyDay = "30天";
        this.allFileDay="所有文件",
        this.Export = "导出";
        this.Delete = "删除";
        this.deviceList = "设备列表";
        this.Nesting = "排版电脑";
        this.SpecifyIp = "指定IP";
        this.Logs = "日  志";
        this.ReviewLogs = "查找日志";
        this.Yes = "是";
        this.No = "否";
        (this.offline = "离线"),
        this.working="加工中",
          (this.online = "在线"),
          (this.SuccessfullyDeleted = "删除成功");
        this.Undelete = "取消删除";
        this.UnreworkText - "取消重新加工";
        this.UnreworkText = "重新加载";
        this.IsDeleteTipMsg = "是否确认删除该信息?";
        this.Rework = "重新加工";
      }
    },
    // 第一页右上角的弹窗
    async DesignMedchineInfoMethod() {
      // var result = await IndexInterface.QueryDesign();
      // this.alldesign2 = result.data;
      this.ShowDesignMedchineInfo = true;
    },
    // 获取被选择的文件的id
    getcheckedfile() {
      var finishfile = JSON.parse(JSON.stringify(this.finishfile));
      var workingfile = JSON.parse(JSON.stringify(this.workingfile));
      var uploadfile = JSON.parse(JSON.stringify(this.uploadfile));
      this.filesIdList = [];
      for (var item in finishfile) {
        if (finishfile[item].ischecked === true) {
          this.filesIdList.push(finishfile[item].fileId);
        }
      }

      for (var item in workingfile) {
        if (workingfile[item].ischecked === true) {
          this.filesIdList.push(workingfile[item].fileId);
        }
      }

      for (var item in uploadfile) {
        if (uploadfile[item].ischecked === true) {
          this.filesIdList.push(uploadfile[item].fileId);
        }
      }
    },
    // 导出excel文件
    async exportexcel() {
      this.getcheckedfile();
      var res = await IndexInterface.exportexcel(this.filesIdList);
      var disposition = res.headers["content-disposition"];
      var fileName = decodeURI(
        disposition.substring(
          disposition.indexOf("filename=") + 9,
          disposition.length
        )
      );
      let blob = new Blob([res.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream",
      });

      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      link.remove();
    },
    // 当设计机器不足十个时，补齐到十个
    fillDesign() {
      if (this.alldesign.length < 10) {
        var lastNum = 10 - this.alldesign.length;
        for (var i = 0; i < lastNum; i++) {
          this.alldesign.push([]);
        }
      }
    },
    // 当a53不到十个时，补齐到十个
    fillA53() {
      if (this.alla53.length < 10) {
        var lastNum = 10 - this.alla53.length;
        for (var i = 0; i < lastNum; i++) {
          this.alla53.push([]);
        }
      }
    },
    // 查询日志
    async querydialog(day) {
      this.querydialogDay = day;
      var SelectDelog_result = await IndexInterface.SelectDelog(day);
      var SelectDelog_resultdata = SelectDelog_result.data;
      this.dialogdata = SelectDelog_resultdata;
    },

    // 选择“显示列表”时间
    async querybyfiledate(date) {
      if (this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(date);
      }
    },

    // 显示列表只能 单选
    bindCheckBox(value) {
      if (value.length > 1) {
        this.checkeddate.splice(0, 1);
      }
    },
    // 日志弹出层 只能单选
    bindCheckBox2(value) {
      if (value.length > 1) {
        this.checkeddate2.splice(0, 1);
      }
    },
    // 将加工完成的文件修改重新加工，状态修改为0，并将文件从待删除文件夹拿出来
    ReworkMethod() {
      this.getcheckedfile();
      ElMessageBox.confirm(this.WhetherToReworkTheSelectedFile, {
        cancelButtonText: this.No,
        confirmButtonText: this.Yes,
        customClass: "del-model",
        center: true,
      })
        .then((res) => {
          IndexInterface.rework(this.filesIdList);
        })
        .catch((err) => {
          ElMessage({
            type: "info",
            message: this.UnreworkText,
          });
        });
    },
    // 让文件不显示
    noseefile() {
      // 获取被选中的文件的编号
      this.getcheckedfile();
      ElMessageBox.confirm(this.WhetherToDeleteTheSelectedFile, {
        cancelButtonText: this.No,
        confirmButtonText: this.Yes,
        customClass: "del-model",
        center: true,
      })
        .then((res) => {
          // 获取点击删除的时候的时间是多少
          var filedate = JSON.parse(JSON.stringify(this.checkeddate2[0]));
          var filedate2;
          // if (filedate === 30) {
          //   filedate2 = 30;
          // } else {
          //   filedate2 = filedate.slice(0, 1);
          // }
          // 发送请求，删除文件
          IndexInterface.noseefile(this.filesIdList);
          // 重新进行查询，刚才删除的文件，就查不出来了
          // this.querybyfiledate(filedate2);
          // location.reload();
        })
        .catch((err) => {
          console.log("在删除时发生了异常" + err);
          ElMessage({
            type: "info",
            message: this.Undelete,
          });
        });
    },

    // 删除A53的弹窗
    noseea53(a53Id) {
      ElMessageBox.confirm(this.IsDeleteTipMsg, {
        confirmButtonText: this.Yes,
        cancelButtonText: this.No,
        customClass: "del-model",
        center: true,
      })
        .then((res) => {
          IndexInterface.NoSeeA53(a53Id).then((res) => {
            ElMessage({
              type: "success",
              message: this.SuccessfullyDeleted,
            });
            this.fillA53();
          });
        })
        .catch((err) => {
          ElMessage({
            type: "info",
            message: this.Undelete,
          });
        });
    },
    noseedesign(designId) {
      ElMessageBox.confirm(this.IsDeleteTipMsg, {
        confirmButtonText: this.Yes,
        cancelButtonText: this.No,
        customClass: "del-model",
        center: true,
      })
        .then((res) => {
          IndexInterface.noseedesign(designId).then((res) => {
            ElMessage({
              type: "success",
              message: this.SuccessfullyDeleted,
            });
          });
          this.fillDesign();
        })
        .catch((err) => {
          ElMessage({
            type: "info",
            message: this.Undelete,
          });
        });
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    // todo A53和设计机器可以删除空，应该修改为不发请求
    // 设置样式
    rowstyles({ row, index }) {
      let stylejson = {
        background: "#1e283b",
        color: "#7B90B8",
        borderColor: "#484f62",
      };
      return stylejson;
    },
    setCellColor2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0)
        return { color: "#24aebb", background: "rgb(42,54,76)" };
      else {
        return { background: "rgb(42,54,76)" };
      }
    },
    rowstyles2({ row, index }) {
      let stylejson = {
        background: "rgb(42,54,76)",
        color: "#7B90B8",
      };
      return stylejson;
    },

    titlestyle({ row, column, rowIndex, columnIndex }) {
      let stylejson = {
        background: "#1e283b",
        textAlign: "center",
        color: "#24aebb",
        fontSize: rowIndex == 0 ? "16px" : "10px",
        // border: "1px solid #484f62",
      };
      return stylejson;
    },
    titlestyle2({ row, index }) {
      let stylejson = {
        textAlign: "center",
        background: "rgb(42,54,76)",
        color: "#24aebb",
        // border: ".1px black solid",
      };
      return stylejson;
    },
    Todiv2() {
      this.NowDislay = "div2";
    },
    Todiv1() {
      this.NowDislay = "div1";
    },
  },

  watch: {
    // 监听上传到服务器的A53记录，重新加载图片、取消选中的、计算总数
    uploadfile(newValue, oldValue) {
      for (var index in newValue) {
        var fileId = newValue[index]["fileId"];
        newValue[index]["srcList"] = "remoteapi/resource/" + fileId;
        this.uploadfile_count = newValue.length;
      }
    },
    workingfile(newValue, oldValue) {
      for (var index in newValue) {
        var fileId = newValue[index]["fileId"];
        newValue[index]["srcList"] = "/remoteapi/resource/" + fileId;
        this.workingfile_count = newValue.length;
      }
    },
    finishfile(newValue, oldValue) {
      for (var index in newValue) {
        var fileId = newValue[index]["fileId"];
        newValue[index]["srcList"] = "/remoteapi/resource/" + fileId;
        this.finishfile_count = newValue.length;
      }
    },
  },
};
</script> 
<style lang="scss" scoped>
.div1-enter-active {
  animation: .5s displaydiv1;
}

@-webkit-keyframes displaydiv1 {
  0% {
    margin-left: -100%;
  }

  100% {
    margin-left: 0px;
  }
}

.div2-enter-active {
  animation: .5s displaydiv2;
}

@-webkit-keyframes displaydiv2 {
  0% {
    margin-left: 100%;
  }

  100% {
    margin-left: 0px;
  }
}

* {
  margin: 0;
  padding: 0;
}

.el-table {
  --el-table-row-hover-bg-color: #484f62 // var(--el-transfer-border-color);
    --el-table-border-color: #484f62;
}



/deep/.el-table__empty-text {
    color: #7B90B8;
}

/deep/.el-scrollbar__view{
   height: 100%;
}

/deep/.el-table__empty-block{
  height: 100%;
}

/deep/.el-progress-bar__outer {
    background-color: rgb(19,23,48);
}

/deep/.el-progress__text {
  min-width: 10px;
  font-size: 10px;
  color:#7B90B8;
}

/deep/.el-progress__text  span{
  font-size: 10px;
}

/deep/.el-checkbox__label {
  display: inline-grid;
  width:100%;
  white-space: pre-line;
  line-height:23px;
  color: #7B90B8;
  font-size: 10px;
  word-wrap: break-word;
}

// 被选中时的状态
/deep/ .is-checked {
  .el-checkbox__inner {
    background-color: #484f62;
  }

  .el-checkbox__inner::after {
  //  background-color: #484f62;
    transform: rotate(45deg) scaleY(1);
    border-color: #24aebb   ;
    z-index: 1000;
  }

  // // 被选中的多选框的方框的 
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #484f62;
    // border-color: red;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label{
    color:#24aebb;
  }

  //table checkbox 选中边框颜色
  .el-checkbox__input.is-checked .el-checkbox__inner{
    border-color:#24aebb;
  }

  // 多选框选中时，对勾是绿色
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    background-color: #484f62;
    border-color: #24aebb   ;
  }


.el-checkbox__input.is-disabled+span.el-checkbox__label {
  color:#24aebb;
  border: #24aebb;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
   border-color: #24aebb;
}


}


/deep/ .el-checkbox__inner {
  border: .1px solid #7B90B8;
  background-color: #484f62;
}

.div1,
.div2 {
  width: 100%;
  height: 100%;
  background-color: rgb(30, 40, 59);
}

.rightbtn {
  width: 3em;
  height: 3em;
  top: 50%;
  right: 0%;
  z-index: 99;
  position: fixed;
  padding: 5px;
}


.leftbtn {
  width: 3em;
  height: 3em;
  top: 50%;
  left: 1%;
  z-index: 99;
  position: fixed;
  padding: 5px;
}

.div-fatcher {
  width: 100%;
  height: 100%;
}


.dialog-wrapper {


  /deep/ .el-dialog {

    border-radius: 12px;
    --el-dialog-box-shadow: none;
    // --el-dialog-padding-primary:10px;

    /* 弹出层设置背景色  头部 */

    .el-dialog__header {
      background: rgb(29, 40, 58);
      margin-right: 0px;
      // padding-top: 22px;
      // padding-bottom: 16px;
      // letter-spacing:5px;
      border-radius: 10px 10px 0 0;
      //  border-bottom: 1px solid #232E44;
      font-weight: bold;

      .el-dialog__title {
        color: #24aebb;
        font-size: 20px;
      }

    }

    .el-dialog__headerbtn .el-dialog__close {
    color: #7B90B8;
    font-size: inherit;
}

    /* 弹出层设置背景色 底部*/

    .el-dialog__body {
      background-color:rgb(29, 40, 58); // !important #232E44
      // padding: 0;
      border-radius: 0 0 10px 10px;
      padding: 5px 15px 15px 15px;
      text-align: left;
    }

    .el-dialog__headerbtn {
      top: 0;
      font-size: 40px;
    }

    .chosedata {
      box-sizing: border-box;
      // padding: 0px 0 10px 20px;
      margin-top: -10px;
      color: #7B90B8;
    }

    .el-radio-group {
      width: 300px;
    }

    .dialog_content {
      width: 100%;
      box-sizing: border-box;
      padding: 15px 15px 15px 15px;
      background-color: #232E44;
      border-radius: 0 0 10px 10px;
      color: #7B90B8;
    }

  }
}



.el-checkbox-group {
  width: 100%;
}



.title {
  height: 50px;
  background-color: rgb(30, 40, 59);
  line-height: 50px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: rgb(52, 79, 98);
  margin-bottom: 1%;
  margin-top: 1%;
}

.title-h3 {
  float: left;
  // margin-left: 40%;
  font-family: "Microsoft Yahei" ;
  color: #24aebb;
}

.title-right {
  float: right;
  width: 120px;
  height: 30px;
  line-height: 50px;
  margin-top: 10px;
}

.content {
  display: flex;
  // background-color: rgb(30, 40, 59);
  height: 75%;
}

.table1 {
  // border: 1px solid #484f62;
  width: 30%;
  // background-color: rgb(30, 40, 59);
  border-collapse: collapse;
  margin-left: 1.0%;
}

.lefttable {
    margin-left: 1%;
}

.el-table__border-left-patch {
  background: none;
  border: 100px solid #484f62;
  border-collapse: collapse
}

.table-count {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -1px;
  border: 1px solid #484f62;
  // height: 0%;
}

.table-count-left-twoandthree {
  display: inline-block;
  color: #7B90B8;
  margin-left: 2%;
}

.table-count-leftone {
  display: inline-block;
  color: #7B90B8;
  margin-left: 2%;
}

.table-count-right {
  color: #24aebb;
  position: absolute;
  right: 10px;
  font-size: 14px;
}

.table-count-num {
  display: inline-block;
  height: 20px;
  border-bottom: 2px solid #24586A;
  text-align: center;
  padding: 0 5px;
}

.button {
  // padding-left: 40%;
  // width: 17%;
  // text-align: center;
  padding-bottom: 2%;
}

.shebeilist {

  // padding-left: 45%;
  text-align: center;
  padding-bottom: 1%;
  color: #24aebb;
}

.table2 {
  margin-left: 1%;
  width: 49.5%;
  background-color: rgb(30, 40, 59);
  border: 1px solid #484f62;
  // border-bottom: none;
  border-collapse: collapse;
}

.table2-title {
  width: 100%;
  margin-left: 0px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #24aebb;
  border-bottom: 1px solid #484f62;
}
</style>
 
<style lang="scss">
// 以下代码是修改 删除设备信息弹窗 样式的

.el-message-box {
  box-sizing: border-box;
  background-color: #2a364d;
  border: none;
  padding-bottom: 30px;
}

.el-message-box__message {
  font-size: 16px;
  color: #24aebb;
}

.el-button {
  width: 70px;
  border-radius: 20px;
  background-color: #2a364e;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.el-button {
  // .el-button--primary {
  span {
    color: #24aebb;
  }

  &:hover {
    span {
      color: #fff;
    }
  }
  .el-progress__text {
    color: #ffffff;
  }
}

.divTableTitle {
  margin-left: 1%;
  display: inline-block;
  width: 28.5%;
  background: rgb(46, 54, 72);
  text-align: center;
  height: 7%;
  color: rgb(36, 174, 187);
  font-weight: bold;
  border: 2px solid rgb(72, 79, 98);
  margin-bottom: -2px;
}

.del-model {
  .el-message-box__btns {
    .el-button:nth-child(1) {
      background-color: #2a364e;
      color: #7b90b8;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .el-button:nth-child(2) {
      background-color: #2a364e;
      color: #7b90b8;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
  }
}
</style>



